<!--
@description: 
@Author: lianys
@Date: 2021-04-05
-->
<template>
    <div class="l-search-box">
        <div class="l-search-box__details">
            <img style="display: block; margin: 3rem auto 0" src="~@/assets/images/serach-logo.png" alt="" />
            <search-box
                :word="word"
                :menuData="menuData"
                :searchData="searchData"
                height="25rem"
                @select="handleSelect"
                @search="handleSearch"
            />
            <dg-row gutter="1rem" class="l-search-box__cont">
                <dg-col :span="16">
                    <dg-card shadow="never" none-border class="no-body-padding">
                        <template slot="header">
                            <h3 class="dg-words-title-second">
                                <span class="c-red">"{{ word }}"</span>为您找到{{ searchResultData.length }}条
                            </h3>
                        </template>
                        <search-list :data="searchResultData" :word="word" @click="handleItemClick" />
                    </dg-card>
                </dg-col>
                <dg-col :span="8" style="height: 100%">
                    <dg-card
                        class="l-search-may no-body-padding"
                        style="margin-bottom: 1rem"
                        header="关键词搜索TOP5"
                        shadow="never"
                        none-border
                    >
                        <dg-scrollbar>
                            <div class="b-padding">
                                <el-link
                                    class="l-search-may__link"
                                    :underline="false"
                                    v-for="(item, index) in keywordData"
                                    :key="index"
                                >
                                    <span class="l-search-may__number">{{ index + 1 }}</span
                                    >{{ item.value }}
                                </el-link>
                            </div>
                        </dg-scrollbar>
                    </dg-card>
                    <dg-card class="l-search-history no-body-padding" header="历史热搜词" shadow="never" none-border>
                        <dg-scrollbar>
                            <div class="b-padding">
                                <div class="l-search-history__link" v-for="(item, index) in historyData" :key="index">
                                    <span class="l-search-history__dot"></span>
                                    <el-link :underline="false" class="l-search-history__label"
                                        ><span>{{ item.value }}</span></el-link
                                    >
                                    <span class="l-search-history__date">{{ item.date }}</span>
                                </div>
                            </div>
                        </dg-scrollbar>
                    </dg-card>
                </dg-col>
            </dg-row>
        </div>
    </div>
</template>

<script>
import main from "./main.js";
export default main;
</script>
<style scoped lang='scss'>
@import "../index.scss";
</style>
